<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="480"></canvas>
<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2.5;
ctx.font = 'italic 22px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';


// Parameters
const y_ground = 400;
const cx = 270; // Center x of the hoop
const a_radius = 75; // Radius
const cy = y_ground - a_radius; // Center y of the hoop
const hoopOuterRadius = a_radius;
const hoopInnerRadius = a_radius - 6;

const blockWidth = 130;
const blockHeight = 100;
const rodLength = 15;
const blockX = cx + rodLength;
const blockY = cy - blockHeight / 2;

const theta_deg = 35;
const theta_rad = theta_deg * Math.PI / 180;


// Draw Ground
ctx.beginPath();
ctx.moveTo(30, y_ground);
ctx.lineTo(570, y_ground);
ctx.stroke();

// Draw hatching for the ground
for (let i = 40; i < 570; i += 15) {
    ctx.beginPath();
    ctx.moveTo(i, y_ground);
    ctx.lineTo(i - 10, y_ground + 10);
    ctx.stroke();
}

// Draw Coordinate System
const axisOriginX = 100;
const axisOriginY = 325;
const axisLength = 80;
ctx.beginPath();
// Vertical line
ctx.moveTo(axisOriginX, axisOriginY);
ctx.lineTo(axisOriginX, axisOriginY - axisLength);
// Horizontal line
ctx.moveTo(axisOriginX, axisOriginY);
ctx.lineTo(axisOriginX + axisLength, axisOriginY);
// Y-arrow
ctx.moveTo(axisOriginX, axisOriginY - axisLength);
ctx.lineTo(axisOriginX - 5, axisOriginY - axisLength + 10);
ctx.moveTo(axisOriginX, axisOriginY - axisLength);
ctx.lineTo(axisOriginX + 5, axisOriginY - axisLength + 10);
// X-arrow
ctx.moveTo(axisOriginX + axisLength, axisOriginY);
ctx.lineTo(axisOriginX + axisLength - 10, axisOriginY - 5);
ctx.moveTo(axisOriginX + axisLength, axisOriginY);
ctx.lineTo(axisOriginX + axisLength - 10, axisOriginY + 5);
ctx.stroke();
ctx.fillText('y', axisOriginX - 20, axisOriginY - axisLength + 5);
ctx.fillText('x', axisOriginX + axisLength + 20, axisOriginY);


// Draw Block M
ctx.strokeRect(blockX, blockY, blockWidth, blockHeight);
ctx.font = 'italic 30px Times New Roman';
ctx.fillText('M', blockX + blockWidth / 2, blockY + blockHeight / 2);
ctx.font = 'italic 22px Times New Roman'; // Reset font

// Draw Hoop
// Outer circle
ctx.beginPath();
ctx.arc(cx, cy, hoopOuterRadius, 0, 2 * Math.PI);
ctx.stroke();
// Inner circle
ctx.beginPath();
ctx.arc(cx, cy, hoopInnerRadius, 0, 2 * Math.PI);
ctx.stroke();

// Draw center mark (small dot)
ctx.beginPath();
ctx.arc(cx, cy, 2.5, 0, 2 * Math.PI);
ctx.fill();

// Draw connecting rod
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(blockX, cy);
ctx.stroke();

// Draw lines and angles inside the hoop
// Vertical line
ctx.beginPath();
ctx.moveTo(cx, cy - hoopInnerRadius);
ctx.lineTo(cx, cy + hoopInnerRadius);
ctx.stroke();

// Radius line 'a' (at ~10 o'clock position)
const a_angle = -150 * Math.PI / 180;
const a_line_end_x = cx + hoopInnerRadius * Math.cos(a_angle);
const a_line_end_y = cy + hoopInnerRadius * Math.sin(a_angle);
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(a_line_end_x, a_line_end_y);
ctx.stroke();
ctx.fillText('a', cx + (hoopInnerRadius/1.5) * Math.cos(a_angle), cy + (hoopInnerRadius/1.5) * Math.sin(a_angle));

// Dashed line for theta
ctx.save();
ctx.setLineDash([5, 3]);
ctx.beginPath();
ctx.moveTo(cx, cy);
const particleX = cx + hoopInnerRadius * Math.sin(theta_rad);
const particleY = cy + hoopInnerRadius * Math.cos(theta_rad);
ctx.lineTo(particleX, particleY);
ctx.stroke();
ctx.restore();

// Angle arc for theta
const angleArcRadius = 25;
ctx.beginPath();
ctx.arc(cx, cy, angleArcRadius, Math.PI / 2, Math.PI / 2 + theta_rad);
ctx.stroke();

// Angle label theta
const thetaLabelX = cx + (angleArcRadius + 15) * Math.sin(theta_rad / 2);
const thetaLabelY = cy + (angleArcRadius + 15) * Math.cos(theta_rad / 2);
ctx.fillText('θ', thetaLabelX, thetaLabelY);


// Draw label 'm'
// Position it near the bottom-right of the hoop, as in the original
ctx.fillText('m', cx + hoopInnerRadius / 2, y_ground - 20);


// Draw Figure Caption
ctx.font = 'bold 20px Times New Roman';
ctx.textAlign = 'center';
ctx.fillText('Fig. 2.7.', canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>